import * as React from 'react';
import {observer} from 'mobx-react'
import styles from './index.scss';
import {Carousel} from 'antd';
import {IPrepareType} from "../../../../type/firstType";


interface IProps {
    borderBottom: string
    borderTop: string
    prepareList: IPrepareType[]
}

@observer
class Home extends React.Component<IProps> {

    constructor(props) {
        super(props);
    }

    public render() {
        const {borderBottom, borderTop, prepareList} = this.props
        return (
            <div className={styles.swiper} style={{borderBottom: borderBottom}}>
                <div className={styles.title} style={{borderTop: borderTop}}>
                    <div className={styles.title1}>WorkOrderNumber</div>
                    <div className={styles.title2}>PartsRequest</div>
                    <div className={styles.title3}>PartsRequestLine</div>
                    <div className={styles.title4}>SerialLotNumbe</div>
                    <div className={styles.title5}>ProductCode</div>
                    <div className={styles.title6}>Product</div>
                </div>
                <div className={styles.swiperC}>
                    {
                        prepareList.length >0 &&
                        <Carousel autoplay={true} dots={false} vertical={true} slidesToShow={5} autoplaySpeed={500}>
                            {
                                prepareList.length >0 &&
                                prepareList.map((item,index) => {
                                    return(
                                        <div key={`itemLTBO_${index}`} className={index%2 === 0 ? styles.list1 : styles.list}>
                                            <div className={styles.listItem1}>{item.PartsRequest}</div>
                                            <div className={styles.listItem2}>{item.PartsRequest}</div>
                                            <div className={styles.listItem3}>PRQL-00090135</div>
                                            <div className={styles.listItem4}>C0271</div>
                                            <div className={styles.listItem5}>{item.ProductCode}</div>
                                            <div className={styles.listItem6}>{item.Product}</div>
                                        </div>
                                    )
                                })
                            }
                        </Carousel>
                    }
                </div>
            </div>
        );
    }
}

export default Home;
